import React, { useState } from 'react';
import _ from 'lodash';
import { Drawer, Button, Input, InputNumber, Divider, Radio, Select, Row, Col, Modal } from 'antd';
import ScoreSelectItemsAttrComponent from './ScoreSelectItemsAttrComponent';
import ScoreInputItemsAttrComponent from './ScoreInputItemsAttrComponent';

const { Option } = Select;


const StringAttrComponent = (props) => {

    const { node, attr, onChange } = props;
    return <Row>
        <Col flex="80px">{attr.label}:</Col>
        <Col flex="auto">
            <Input value={_.get(node.attrs, attr.path, '')}
                style={{ width: '120px' }}
                onChange={(e) => {
                    //console.log(e.target.value);
                    _.set(node.attrs, attr.path, e.target.value);
                    onChange(attr.path, e.target.value);
                }} />
        </Col>
    </Row>



}
const NumberAttrComponent = (props) => {
    const { node, attr, onChange } = props;
    const { min, max } = attr;
    return <Row>
        <Col flex="80px">{attr.label}:</Col>
        <Col flex="auto"><InputNumber
            style={{ width: '120px' }}
            {...{ min, max }}
            value={_.get(node.attrs, attr.path, '')}
            onChange={(value) => {
                //console.log(e.target.value);
                _.set(node.attrs, attr.path, value);
                onChange(attr.path, value);
            }} /></Col>
    </Row>

}
const BooleanAttrComponent = (props) => {
    const { node, attr, onChange } = props;
    return <Row>
        <Col flex="80px">{attr.label}:</Col>
        <Col flex="auto">
            <Radio.Group
                value={`${_.get(node.attrs, attr.path, '')}`}
                onChange={(e) => {
                    //console.log(e.target.value,'tvalue');
                    //node.attrs[attr.name] = JSON.parse(e.target.value);
                    const v = JSON.parse(e.target.value);
                    _.set(node.attrs, attr.path, v);
                    //console.log(v, 'tv');
                    onChange(attr.path, v);
                }} >
                <Radio value={'true'}>是</Radio>
                <Radio value={'false'}>否</Radio>
            </Radio.Group>
        </Col>
    </Row>
}

const SelectAttrComponent = (props) => {
    const { node, attr, onChange } = props;
    const { opts = [] } = attr;
    return <Row>
        <Col flex="80px">{attr.label}:</Col>
        <Col flex="auto">
            <Select
                style={{ width: '120px' }}
                value={_.get(node.attrs, attr.path, null)}
                onChange={(value) => {
                    //console.log(e.target.value);
                    // node.attrs[attr.name] = value;
                    // onChange(attr.name, value);
                    _.set(node.attrs, attr.path, value);
                    //console.log(v, 'tv');
                    onChange(attr.path, value);
                }}>
                {opts.map((opt, index) => {
                    return <Option key={index} value={opt.value}>{opt.text}</Option>
                })}
            </Select></Col>
    </Row>
}





const AttrComponent = (props) => {
    const { attr } = props;
    const { type } = attr;
    let result = <></>;
    switch (type) {
        case 'string':
            result = <StringAttrComponent {...props} />;
            break;
        case 'number':
            result = <NumberAttrComponent {...props} />;
            break;
        case 'boolean':
            result = <BooleanAttrComponent {...props} />;
            break;
        case 'select':
            result = <SelectAttrComponent {...props} />;
            break;
        case 'score-select-items':
            result = <ScoreSelectItemsAttrComponent {...props} />;
            break;
        case 'score-input-items':
            result = <ScoreInputItemsAttrComponent {...props} />;
            break;
        default:
            result = <></>;
            break;
    }
    return result;

}

const PropertyEdit = (props) => {

    const { node, attrList = [], onClose, onChange, } = props;

    return <div
        onClick={(e) => {
            e.stopPropagation();
        }}
        onDoubleClick={(e) => {
            e.stopPropagation();
        }}><Drawer
            width={300}
            title={`${node.type}`}
            placement="right"
            closable={true}
            onChange={() => {

            }}
            onClose={() => {
                if (onClose) {
                    onClose();
                }
            }}
            visible={true}>
            <Row>
                <Col flex="80px" style={{fontWeight:"bold"}}>code:</Col>
                <Col flex="auto" style={{fontSize:"12px"}}> {node.code}</Col>
            </Row>

            {
                attrList.map((attr, index) => {

                    return <div key={index}
                        style={{ marginTop: '12px' }}>
                        <AttrComponent
                            node={node}
                            attr={attr}
                            onChange={onChange} />
                    </div>
                })
            }
            <Divider />
        </Drawer>
    </div>
}


export default PropertyEdit;